<template>
  <section>
    <el-form label-width="100px" size="mini">
      <el-form-item :label="prop.key" v-for="(prop,index) in propList" :key="index">
        <el-switch v-model="prop.val" active-text="是" inactive-text="否" @change="switchEvent(propList)" :disabled="disabled"></el-switch>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "sel-prop",
    props:['typeData','disabled'],
    data(){
      return{
        propList:[
          {key:'地址',val:false,code:'needAddress'},
          {key:'用户',val:false,code:'needCustomerId'},
        ],
      }
    },
    watch:{
      typeData(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created() {
      // console.log('没有typeData----',this.typeData)
      this.init(this.typeData)
    },
    methods: {
      init(typeData){
        if(typeData.props === undefined){
          Vue.set(typeData,'props',{})
        }
        this.makeDataUi(typeData.props)
      },
      makeDataUi(obj){
        this.propList.forEach(prop=>{
          prop.val=false//初始化一下
          for(let key in obj){
            if(prop.code === key){
              prop.val=obj[key]
            }
          }
        })
      },
      switchEvent(array){
        // console.log('变动事件-------',array)
        this.makePropData(array)
      },
      makePropData(array){//时刻都要同步到前面
        let tmp={}
        array.forEach(p=>{
          tmp[p.code]=p.val
        })
        this.typeData.props={...tmp}
      }
    }
  }
</script>

<style scoped>

</style>
